<template>
	<view class="content">
		<view class="header">学术检索</view>
		<view  class="my-service-title" @click="handleNavBarBack">
			<uv-icon name="arrow-left" size="30rpx" color="#fff"></uv-icon>
		</view>
		
		<view class="search">
			<uv-search placeholder="搜索会议或讲者" v-model="keyword" :showAction="false" @change="searchFun"></uv-search>
		</view>
		
		<view class="buts">
			<view class="but" :class="{'action': action == item.id}" v-for="(item,index) in buts" :key="index" @click="butSet(item)">
				{{ item.name }}
			</view>
		</view>
		
		<scroll-view class="card" scroll-y :scroll-top="scrollTop">
		  <view v-for="(group, groupIndex) in groupedExperts" :key="groupIndex">
		    <!-- 显示首字母标题 -->
		    <view class="letter-header">
				{{ group.letter }}
				<text class="text">({{ group.date }})</text>
			</view>
		    
		    <!-- 遍历该分组下的专家 -->
		    <view v-for="(item, index) in group.items" :key="index" class="list"  @click="openFun(item)">
		      <view class="info">
		        <view class="title">{{ item.title }}</view>
				<view class="time">{{ item.time }}</view>
		        <view class="attendees">
					<view class="label">讲者:</view>
					<view class="value">
						<text v-for="(it,i) in item.attendees" :key="i">{{ it }}</text>
						<text v-if="!item.attendees.length">--</text>
					</view>
				</view>
				<view class="attendees">
					<view class="label">主持、点评:</view>
					<view class="value">
						<text v-for="(it,i) in item.agenda" :key="i">{{ it }}</text>
						<text v-if="!item.agenda.length">--</text>
					</view>
				</view>
		      </view>
		    </view>
		  </view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {onLoad, onShow, onHide } from '@dcloudio/uni-app';
	import { ref,computed,nextTick } from 'vue';
	import { meetingData } from './index.js';
	const keyword = ref('')
	const expertFilterList = ref(JSON.parse(JSON.stringify(meetingData)))
	const action = ref('all')
	const scrollTop = ref(0)
	const buts = ref([
		{
			name: '全部会议',
			id: 'all'
		},
		{
			name: '6月21日',
			id: '2025年6月21日'
		},
		{
			name: '6月22日',
			id: '2025年6月22日'
		}
	])
	
	const butSet = (item) => {
		action.value = item.id;
		scrollTop.value = 1;
		keyword.value = '';
		if(item.id == 'all'){
			expertFilterList.value = [...meetingData]
		}else{
			expertFilterList.value = meetingData.filter(it => it.date == item.id)
		}
		nextTick(() => {
			scrollTop.value = 0;
		})
	}
	
	// 分组计算属性
	const groupedExperts = computed(() => {
	  const groups = {};
	  const result = [];
	  
	  expertFilterList.value.forEach(item => {
	    const letter = item.location;
	    if (!groups[letter]) {
	      groups[letter] = {
	        letter,
			date:'',
	        items: []
	      };
	      result.push(groups[letter]);
	    }
		groups[letter].date = item.date;
	    groups[letter].items.push(item);
	  });
	  
	  // 按字母排序
	  return result;
	});
	
	const searchFun = () => {
		let list = []
		scrollTop.value = 1;
		if(action.value == 'all'){
			list = JSON.parse(JSON.stringify(meetingData))
		}else{
			list = meetingData.filter(it => it.date == action.value)
		}
		nextTick(() => {
			scrollTop.value = 0;
		})
		expertFilterList.value = list.filter(it => 
			it.attendees.join('').includes(keyword.value) || it.title.includes(keyword.value) || it.agenda.join('').includes(keyword.value)
		);
	};

	
	// 返回
	const handleNavBarBack = () => {
		uni.navigateBack();
	}
	
	const imgReturn = (item) => {
		let index = expertData.findIndex(it => it.name == item.name)
		let i = index+1
		return `https://mp-9cd2f666-e017-4f0e-a8b2-2c4583bc29c1.cdn.bspapp.com/expert/图片${i}.png`
	}
	
	const openFun = (item) => {
		let index = expertData.findIndex(it => it.name == item.name)
		uni.navigateTo({url: `/pages/expert/expertDetails?expertId=${index}`})
	}
	
	//分享函数
	const getWin =  async () => { 
		 const currentUrl = 'https://www.yunyakeji.top/';
		
		 // 请求后端获取签名配置
		const res = await vk.callFunction({
			url: 'client/token/pub/index',
			data: { url: currentUrl } // 传递当前URL
		});
		
		const config = res;
		console.log('config',config)
		// 初始化微信SDK
		jWeixin.config({
			debug: false,
			appId: config.appId,
			timestamp: config.timestamp,
			nonceStr: config.noncestr,
			signature: config.signature,
			jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData','onMenuShareAppMessage','onMenuShareTimeline']
		});
		
		jWeixin.ready(() => {
		    // 自定义“分享给朋友”
			 const shareConfig = {
				title: '2025天津市第四届海河肺癌诊疗新进展学术会议',
				desc: '会议日期：6月21日～22日，会议场地：天津梅江中心皇冠假日酒店', // 分享描述
				link: currentUrl, // 使用当前URL
				imgUrl: 'https://mp-9cd2f666-e017-4f0e-a8b2-2c4583bc29c1.cdn.bspapp.com/WechatIMG192.webp', // 分享图标
			};
			
		    jWeixin.updateAppMessageShareData(shareConfig);
		
		    // 自定义“分享到朋友圈”
		    jWeixin.updateTimelineShareData(shareConfig);
			
			// 兼容旧版API
			  jWeixin.onMenuShareAppMessage(shareConfig);
			  
			  jWeixin.onMenuShareTimeline(shareConfig);
		});
		
		jWeixin.error(err => {
			console.error('微信SDK初始化失败', err);
		});
	}
	
	onLoad(() => {
		getWin()
	})
</script>

<style lang="scss" scoped>
	.content {
		width: 100vw;
		max-width: 750px;
		height: 100vh;
		background: no-repeat center bottom;
		background-size: auto 100%;
		box-sizing: border-box;
		position: relative;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		margin: 0 auto;
		background-color: #f9fafb;
		

		.header {
			width: 100%;
			height: 112rpx;
			background: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: 600;
			font-size: 36rpx;
			color: #111827;
			margin-bottom: 16rpx;
			
		}
		
		.my-service-title {
			width: 54rpx;
			height: 54rpx;
			background: rgba(24, 31, 67, 0.16);
			border-radius: 16rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			position: fixed;
			top: 30rpx;
			left: 30rpx;
			z-index: 99;
		}
		
		
		.search{
			width: 100%;
			height: auto;
			padding: 20rpx 32rpx;
			margin-bottom: 16rpx;
			background-color: #fff;
			box-sizing: border-box;
		}
		
		.buts{
			width: 100%;
			height: auto;
			display: inline-flex;
			align-items: center;
			gap: 14rpx;
			background-color: #FFFFFF;
			padding: 20rpx 32rpx;
			margin-bottom: 16rpx;
			box-sizing: border-box;
			
			.but{
				width: auto;
				height: 56rpx;
				background: #dbdbdb;
				border-radius: 56rpx;
				padding: 0 24rpx;
				font-family: Roboto, Roboto;
				font-weight: 500;
				font-size: 25rpx;
				color: #374151;
				display: flex;
				align-items: center;
				justify-content: center;
				
				&.action{
					background: #3B82F6;
					color: #fff;
				}
			}
		}
		
		.card{
			width: 100%;
			flex: 1;
			overflow-y: auto;
			padding: 0 28rpx;
			box-sizing: border-box;
			
			.letter-header {
			  padding: 20rpx 0;
			  font-weight: bold;
			  font-size: 32rpx;
			  color: #4b5563;
			  
			  .text{
				  font-size: 26rpx;
				  color: #b9b9b9;
				  font-weight: 500;
			  }
			}
			
			.list{
				width: 100%;
				height: auto;
				padding: 28rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				box-sizing: border-box;
				background: #FFFFFF;
				box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(0,0,0,0.05);
				border-radius: 14rpx;
				margin-bottom: 22rpx;
				
				.info{
					flex: 1;
					
					.title{
						width: 100%;
						height: auto;
						font-family: Roboto, Roboto;
						font-weight: 600;
						font-size: 34rpx;
						color: #1F2937;
						line-height: 1.6;
						text-align: center;
					}
					
					.time{
						width: 100%;
						height: auto;
						font-family: Roboto, Roboto;
						font-weight: 400;
						font-size: 30rpx;
						color: #1F2937;
						line-height: 40rpx;
						margin-bottom: 14px;
						text-align: center;
					}
					
					.attendees{
						width: 100%;
						height: auto;
						display: flex;
						justify-content: space-between;
						margin-bottom: 20rpx;
						
						.label{
							width: 140rpx;
							height: auto;
							font-family: Roboto, Roboto;
							font-weight: 400;
							font-size: 25rpx;
							color: #333;
							line-height: 35rpx;
							text-align: right;
						}
						
						.value{
							flex: 1;
							max-width: calc(100% - 160rpx);
							min-width: calc(100% - 160rpx);
							height: auto;
							display: flex;
							flex-direction: column;
							gap: 14rpx;
							font-family: Roboto, Roboto;
							font-weight: 600;
							font-size: 25rpx;
							color: #000;
							line-height: 35rpx;
						}
					}
					
					.company{
						width: 100%;
						font-family: Roboto, Roboto;
						font-weight: 400;
						font-size: 28rpx;
						color: #6B7280;
						line-height: 40rpx;
					}
				}

			}
		}
	}
</style>